<template>
  <div class="font-inter bg-gray-50 text-dark">
    <!-- 英雄区域 -->
    <section class="pt-32 pb-20 bg-gradient-to-b from-blue-50 to-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
            <h1
              class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow"
            >
              你好，我是<span class="text-primary">{{
                heroSectionData?.name || "张小明"
              }}</span>
            </h1>
            <p class="mt-4 text-lg text-gray-600 max-w-xl">
              {{
                heroSectionData?.description ||
                "一名经验丰富的全栈开发者，专注于构建高性能的Web应用和移动端解决方案，从前端到后端，为用户提供完整的数字化体验。"
              }}
            </p>
            <div class="mt-8 flex flex-wrap gap-4">
              <a
                v-if="heroSectionData?.primary_button_text"
                :href="heroSectionData.primary_button_link || '#projects'"
                class="px-6 py-3 bg-primary text-white rounded-lg shadow-lg hover:shadow-xl transition-all"
              >
                {{ heroSectionData.primary_button_text }}
              </a>
              <NuxtLink
                v-if="heroSectionData?.secondary_button_text"
                :to="heroSectionData.secondary_button_link || '/resume'"
                class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg shadow-lg hover:shadow-xl transition-all hover:from-purple-700 hover:to-blue-700"
              >
                {{ heroSectionData.secondary_button_text }}
              </NuxtLink>
              <a
                v-if="heroSectionData?.tertiary_button_text"
                :href="heroSectionData.tertiary_button_link || '#contact'"
                class="px-6 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-gray-50 transition-all"
              >
                {{ heroSectionData.tertiary_button_text }}
              </a>
            </div>
          </div>
          <div class="md:w-1/2 animate-fade-in">
            <div class="relative">
              <div
                class="absolute -inset-4 bg-gradient-primary rounded-full blur-3xl opacity-20"
              ></div>
              <img
                :src="
                  heroSectionData?.avatar_url ||
                  'https://picsum.photos/id/1005/600/600'
                "
                alt="个人照片"
                class="relative z-10 rounded-2xl shadow-2xl w-full max-w-md mx-auto object-cover h-[400px]"
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold">关于我</h2>
          <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
        </div>

        <div class="flex flex-col md:flex-row gap-12 items-center">
          <div class="md:w-1/2">
            <div class="relative">
              <div
                class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl blur-xl"
              ></div>
              <img
                :src="
                  aboutMeData?.cover_image_url ||
                  'https://picsum.photos/id/1076/600/800'
                "
                alt="工作照片"
                class="relative z-10 rounded-2xl shadow-xl w-full max-w-md mx-auto"
              />
            </div>
          </div>

          <div class="md:w-1/2">
            <h3 class="text-2xl font-bold mb-4">
              {{ aboutMeData?.title || "全栈开发者 & 技术架构师" }}
            </h3>
            <p class="text-gray-600 mb-4">
              {{
                aboutMeData?.description ||
                "我是一名拥有5年+经验的全栈开发者，精通多种编程语言和技术栈。从前端用户界面到后端服务架构，从数据库设计到API开发，我能够独立完成整个项目的技术实现。"
              }}
            </p>
            <p class="text-gray-600 mb-6">
              {{
                aboutMeData?.bio ||
                "我主要使用Node.js、PHP、Python进行后端开发，熟练掌握Vue.js、Nuxt.js等前端框架，同时具备小程序开发经验。我热衷于探索新技术，并将其应用到实际项目中，为用户创造价值。"
              }}
            </p>

            <div class="grid grid-cols-2 gap-4 mb-8">
              <div class="flex items-center">
                <div
                  class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"
                >
                  <Icon name="fa:code" class="text-primary text-xl" />
                </div>
                <div>
                  <h4 class="font-bold">
                    {{ aboutMeData?.experience_years || "5" }}+
                  </h4>
                  <p class="text-sm text-gray-500">开发经验</p>
                </div>
              </div>

              <div class="flex items-center">
                <div
                  class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"
                >
                  <Icon name="fa:folder-open" class="text-primary text-xl" />
                </div>
                <div>
                  <h4 class="font-bold">
                    {{ aboutMeData?.completed_projects || "30" }}+
                  </h4>
                  <p class="text-sm text-gray-500">完成项目</p>
                </div>
              </div>

              <div class="flex items-center">
                <div
                  class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"
                >
                  <Icon name="fa:users" class="text-primary text-xl" />
                </div>
                <div>
                  <h4 class="font-bold">
                    {{ aboutMeData?.clients_count || "15" }}+
                  </h4>
                  <p class="text-sm text-gray-500">合作客户</p>
                </div>
              </div>

              <div class="flex items-center">
                <div
                  class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"
                >
                  <Icon name="fa:trophy" class="text-primary text-xl" />
                </div>
                <div>
                  <h4 class="font-bold">
                    {{ aboutMeData?.awards_count || "5" }}+
                  </h4>
                  <p class="text-sm text-gray-500">设计奖项</p>
                </div>
              </div>
            </div>

            <a
              href="#projects"
              class="inline-flex items-center text-primary font-medium hover:underline"
            >
              查看我的作品 <Icon name="fa:arrow-right" class="ml-2" />
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 项目展示 -->
    <section id="projects" class="py-20 bg-gray-50">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold">我的项目</h2>
          <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
            探索我的最新和最值得骄傲的项目，每一个都代表了我的技能和创造力。
          </p>
          <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
        </div>

        <!-- 项目分类展示 -->
        <div class="space-y-16">
          <div v-for="(projects, categoryId) in projectList" :key="categoryId">
            <div class="flex items-center mb-8">
              <div
                class="w-12 h-12 rounded-xl flex items-center justify-center mr-4"
                :style="{
                  backgroundColor: getCategoryConfig(categoryId).color,
                }"
              >
                <Icon
                  :name="getCategoryConfig(categoryId).icon"
                  class="text-white text-xl"
                />
              </div>
              <div>
                <h3 class="text-2xl font-bold">
                  {{ getCategoryConfig(categoryId).name }}
                </h3>
                <p class="text-gray-600">
                  {{ getCategoryConfig(categoryId).description }}
                </p>
              </div>
            </div>
            <div
              v-if="projectsLoading"
              class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
            >
              <div
                v-for="n in 3"
                :key="n"
                class="bg-white rounded-xl shadow-lg overflow-hidden"
              >
                <div class="animate-pulse">
                  <div class="w-full h-48 bg-gray-200"></div>
                  <div class="p-6">
                    <div class="h-4 bg-gray-200 rounded mb-2"></div>
                    <div class="h-3 bg-gray-200 rounded mb-4"></div>
                    <div class="flex flex-wrap gap-2 mb-4">
                      <div class="h-6 w-16 bg-gray-200 rounded-full"></div>
                      <div class="h-6 w-20 bg-gray-200 rounded-full"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-else
              class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
            >
              <div
                v-for="project in projects"
                :key="project.id"
                class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group"
                @click="goToProjectDetail(project.id)"
              >
                <div class="relative">
                  <img
                    :src="
                      project.cover_image_url ||
                      'https://picsum.photos/id/1076/600/800'
                    "
                    class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div class="absolute top-4 left-4 flex gap-2">
                    <span
                      class="text-white text-xs font-bold px-2 py-1 rounded-full"
                      :style="{
                        backgroundColor: getCategoryConfig(categoryId).color,
                      }"
                    >
                      {{ getCategoryConfig(categoryId).name }}
                    </span>
                    <span
                      v-if="project.view_count"
                      class="bg-black/50 text-white text-xs px-2 py-1 rounded-full flex items-center"
                    >
                      <Icon name="fa:eye" class="mr-1" />{{
                        project.view_count
                      }}
                    </span>
                  </div>
                </div>
                <div class="p-6">
                  <h4 class="text-xl font-bold mb-2">{{ project.title }}</h4>
                  <p class="text-gray-600 mb-4">{{ project.description }}</p>
                  <div class="flex flex-wrap gap-2 mb-4">
                    <span
                      v-for="tech in (project.technologies || []).slice(0, 4)"
                      :key="tech"
                      class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded-full"
                    >
                      {{ tech }}
                    </span>
                  </div>
                  <div class="flex gap-2">
                    <a
                      v-if="project.github_url"
                      :href="project.github_url"
                      target="_blank"
                      class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors text-sm font-medium"
                    >
                      <Icon name="fa:github" class="mr-1" />代码
                    </a>
                    <a
                      v-if="project.demo_url"
                      :href="project.demo_url"
                      target="_blank"
                      class="inline-flex items-center px-3 py-1.5 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium"
                    >
                      <Icon name="fa:play" class="mr-1" />演示
                    </a>
                    <NuxtLink
                      :to="`/project/${project.id}`"
                      class="inline-flex items-center px-3 py-1.5 border border-primary text-primary rounded-lg hover:bg-blue-50 transition-colors text-sm font-medium"
                    >
                      详情 <Icon name="fa:external-link" class="ml-1" />
                    </NuxtLink>
                  </div>
                </div>
              </div>
              <div
                v-if="!projects || projects.length === 0"
                class="col-span-3 text-center py-12"
              >
                <Icon
                  name="fa:folder-open"
                  class="text-4xl text-gray-400 mb-4"
                />
                <p class="text-gray-600">暂无项目</p>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center mt-12">
          <a
            href="#"
            class="inline-flex items-center justify-center px-6 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-gray-50 transition-all"
          >
            查看更多项目 <Icon name="fa:arrow-right" class="ml-2" />
          </a>
        </div>
      </div>
    </section>

    <!-- 技能展示 -->
    <section id="skills" class="py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold">我的技能</h2>
          <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
            作为一名全栈开发者，我掌握了从前端到后端、从Web应用到移动端开发的完整技术栈，能够独立完成项目的全流程开发。
          </p>
          <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
        </div>

        <!-- 技能分类展示 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
          <!-- 静态技能分类 -->
          <div
            v-for="category in skillsData"
            :key="category.category.id"
            class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300"
          >
            <div class="flex items-center mb-6">
              <div
                class="w-12 h-12 rounded-xl flex items-center justify-center mr-4"
                :style="{ backgroundColor: category.category.color }"
              >
                <Icon
                  :name="category.category.icon"
                  class="text-white text-xl"
                />
              </div>
              <h3 class="text-xl font-bold text-gray-800">
                {{ category.category.name }}
              </h3>
            </div>
            <p class="text-gray-600 mb-6">
              {{ category.category.description }}
            </p>
            <div class="flex flex-wrap gap-2">
              <span
                v-for="skill in category.skills"
                :key="skill.id"
                class="px-3 py-1 rounded-full text-sm font-medium"
                :style="{
                  backgroundColor: skill.color + '20',
                  color: skill.color + '80',
                }"
              >
                {{ skill.name }}
              </span>
            </div>
          </div>
        </div>

        <!-- 核心技能亮点 -->
        <div class="bg-gray-50 rounded-2xl p-8">
          <h3 class="text-2xl font-bold text-center mb-8">核心技能亮点</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div
              v-for="highlight in skillHighlights"
              :key="highlight.title"
              class="text-center p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300"
            >
              <div
                class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
                :class="highlight.bgColor"
              >
                <Icon
                  :name="highlight.icon"
                  :class="highlight.iconColor"
                  class="text-2xl"
                />
              </div>
              <h4 class="font-bold text-lg mb-2">{{ highlight.title }}</h4>
              <p class="text-gray-600 text-sm">{{ highlight.description }}</p>
            </div>
          </div>
        </div>

        <!-- 学习与成长 -->
        <div class="mt-12 text-center">
          <h3 class="text-xl font-bold mb-6">持续学习中</h3>
          <div class="flex flex-wrap justify-center gap-3">
            <span
              v-for="learning in currentLearning"
              :key="learning"
              class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium border border-yellow-200"
            >
              <Icon name="fa:star" class="mr-1" />{{ learning }}
            </span>
          </div>
          <p class="mt-4 text-gray-600">
            保持对新技术的好奇心，不断提升自己的技能水平
          </p>
        </div>
      </div>
    </section>

    <!-- 联系部分 -->
    <section id="contact" class="py-20 bg-gray-50">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold">联系我</h2>
          <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
            对我的项目感兴趣或者有合作机会？欢迎通过以下方式与我取得联系。
          </p>
          <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
        </div>

        <!-- 联系方式卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
          <!-- 邮箱联系 -->
          <div
            v-if="contactInfoData?.email"
            class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 text-center group"
          >
            <div
              class="w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300 bg-blue-100"
            >
              <Icon name="fa:envelope" class="text-2xl text-blue-600" />
            </div>
            <h3 class="text-xl font-bold mb-2">电子邮箱</h3>
            <p class="text-gray-600 mb-4">通过邮件与我取得联系</p>
            <a
              :href="`mailto:${contactInfoData.email}`"
              class="inline-flex items-center text-primary font-medium hover:underline"
            >
              {{ contactInfoData.email }}
              <Icon name="fa:external-link" class="ml-2 text-sm" />
            </a>
          </div>

          <!-- 电话联系 -->
          <div
            v-if="contactInfoData?.phone"
            class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 text-center group"
          >
            <div
              class="w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300 bg-green-100"
            >
              <Icon name="fa:phone" class="text-2xl text-green-600" />
            </div>
            <h3 class="text-xl font-bold mb-2">联系电话</h3>
            <p class="text-gray-600 mb-4">随时与我电话沟通</p>
            <a
              :href="`tel:${contactInfoData.phone}`"
              class="inline-flex items-center text-primary font-medium hover:underline"
            >
              {{ contactInfoData.phone }}
              <Icon name="fa:external-link" class="ml-2 text-sm" />
            </a>
          </div>

          <!-- 位置信息 -->
          <div
            v-if="contactInfoData?.location"
            class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 text-center group"
          >
            <div
              class="w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300 bg-purple-100"
            >
              <Icon name="fa:map-marker" class="text-2xl text-purple-600" />
            </div>
            <h3 class="text-xl font-bold mb-2">所在位置</h3>
            <p class="text-gray-600 mb-4">我当前所在的城市</p>
            <span
              class="inline-flex items-center text-primary font-medium"
            >
              {{ contactInfoData.location }}
            </span>
          </div>
        </div>


        <!-- 工作状态 -->
        <div class="mt-12 text-center">
          <div
            class="inline-flex items-center px-6 py-3 bg-green-100 text-green-800 rounded-full"
          >
            <div
              class="w-3 h-3 bg-green-500 rounded-full mr-3 animate-pulse"
            ></div>
            <span class="font-medium">目前可接受新项目合作</span>
          </div>
          <p class="mt-4 text-gray-600">
            我很乐意讨论您的项目需求，让我们一起创造出色的数字体验！
          </p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
// 页面元数据
useHead({
  title: "首页 | 个人博客",
  meta: [
    {
      name: "description",
      content:
        "经验丰富的全栈开发者，精通Node.js、PHP、Python、Golang等后端技术，熟练掌握Vue.js、Nuxt.js、UniApp等前端框架，专注于构建高性能的Web应用和移动端解决方案。",
    },
  ],
});

// 页面滚动
const showBackToTop = ref(false);
// 项目列表
const projectList = ref({});
// 项目列表加载状态
const projectsLoading = ref(true);
// 分类数据
const categoriesData = ref([]);
// 英雄区块数据
const heroSectionData = ref(null);
// 关于我数据
const aboutMeData = ref(null);
// 技能数据
const skillsData = ref([]);
// 联系信息数据
const contactInfoData = ref(null);


// 获取英雄区块数据
const fetchHeroSection = async () => {
  try {
    const { data } = await useFetch("/api/home/hero-section");
    if (data.value?.success) {
      heroSectionData.value = data.value.data;
    }
  } catch (error) {
    console.error("获取英雄区块数据失败:", error);
  }
};

// 获取关于我数据
const fetchAboutMe = async () => {
  try {
    const { data } = await useFetch("/api/home/about-me");
    if (data.value?.success) {
      aboutMeData.value = data.value.data;
    }
  } catch (error) {
    console.error("获取关于我数据失败:", error);
  }
};


// 获取技能数据
const fetchSkills = async () => {
  try {
    const { data } = await useFetch("/api/skills");
    if (data.value?.success) {
      skillsData.value = data.value.data;
    }
  } catch (error) {
    console.error("获取技能数据失败:", error);
  }
};

// 获取联系信息数据
const fetchContactInfo = async () => {
  try {
    const { data } = await useFetch("/api/home/contact-info");
    if (data.value?.success) {
      contactInfoData.value = data.value.data;
    }
  } catch (error) {
    console.error("获取联系信息数据失败:", error);
  }
};

// 获取首页项目数据
const fetchHomeProjects = async () => {
  try {
    projectsLoading.value = true;
    const { data, status } = await useFetch("/api/home/projects");
    if (status.value === "pending") {
      // 等待status变为不是pending
      await new Promise((resolve) => {
        const interval = setInterval(() => {
          if (status.value !== "pending") {
            clearInterval(interval);
            resolve();
          }
        }, 100);
      });
    }

    if (data.value?.success) {
      projectList.value = data.value.data;
    }
  } catch (error) {
    console.error("获取首页项目数据失败:", error);
  } finally {
    projectsLoading.value = false;
  }
};

// 获取分类数据
const fetchCategories = async () => {
  try {
    const { data, status } = await useFetch("/api/categories");

    if (status.value === "pending") {
      // 等待status变为不是pending
      await new Promise((resolve) => {
        const interval = setInterval(() => {
          if (status.value !== "pending") {
            clearInterval(interval);
            resolve();
          }
        }, 100);
      });
    }

    if (data.value?.success) {
      categoriesData.value = data.value.data;
    }
  } catch (error) {
    console.error("获取分类数据失败:", error);
  }
};

await Promise.all([
  fetchHeroSection(),
  fetchAboutMe(),
  fetchSkills(),
  fetchContactInfo(), 
  fetchCategories(),
  fetchHomeProjects(),
]);

// 分类配置辅助函数
const getCategoryConfig = (categoryId) => {
  return (
    categoriesData.value.find((item) => item.id == categoryId) || {
      name: `分类 ${categoryId}`,
      description: "项目展示",
      icon: "fa:folder",
      color: "bg-gray-500",
    }
  );
};

// 核心技能亮点
const skillHighlights = [
  {
    title: "全栈开发",
    description: "多语言后端 + 现代前端技术栈",
    icon: "fa:layers",
    bgColor: "bg-blue-100",
    iconColor: "text-blue-600",
  },
  {
    title: "跨平台开发",
    description: "Web应用、小程序、移动端一体化",
    icon: "fa:mobile",
    bgColor: "bg-green-100",
    iconColor: "text-green-600",
  },
  {
    title: "系统架构",
    description: "微服务架构与API设计",
    icon: "fa:sitemap",
    bgColor: "bg-yellow-100",
    iconColor: "text-yellow-600",
  },
  {
    title: "DevOps",
    description: "自动化部署与运维监控",
    icon: "fa:cogs",
    bgColor: "bg-purple-100",
    iconColor: "text-purple-600",
  },
];

// 当前学习的技术
const currentLearning = [
  "Golang 进阶",
  "Kubernetes",
  "微服务架构",
  "云原生技术",
];

// 新标签页打开项目详情
const goToProjectDetail = (projectId) => {
  window.open(`/project/${projectId}`, "_blank");
};

// 生命周期
onMounted(() => {
  // 滚动监听
  const handleScroll = () => {
    showBackToTop.value = window.scrollY > 300;
  };

  window.addEventListener("scroll", handleScroll);

  onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
  });
});
</script>

<style>
/* 全局样式 */
html {
  scroll-behavior: smooth;
}

/* 自定义工具类 */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #165dff 0%, #0a49e0 100%);
}

/* 加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* 颜色变量 */
:root {
  --primary: #165dff;
  --secondary: #36cfc9;
  --dark: #1d2129;
  --light: #f2f3f5;
  --muted: #86909c;
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-dark {
  background-color: var(--dark);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
